<template>
  <div style="display: flex; justify-content: center; margin-top: 1vh">
    <el-card style="width: 780px" shadow="always">
      <template #header>
        <div class="card-header">
          <el-input v-model="searchContent" style="width: 240px" placeholder="Please input"/>
          <el-button @click="search" style="margin-left: 15px" :icon="Search" circle/>
        </div>
      </template>
      <el-table
          :data="musicData"
          border
          style="width: 100%"
          @row-dblclick="dblclick"
          :row-class-name="tableRowClassName"
          max-height="500px"
      >
        <el-table-column label="歌名" width="165">
          <template #default="scope">
            <el-image style="width: 40px; height: 40px" :src="scope.row.pic"  />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="歌名" width="300"/>
        <el-table-column prop="author" label="作者" />

      </el-table>
      <template #footer>
        <audio hidden=true controls ref="audioRef" src="http://music.163.com/song/media/outer/url?id=5257138.mp3">
        </audio>
        <div style="width: 100%; position: relative">
          <div style= "position: absolute">
            <div style="display: flex">
              <div><el-image style="width: 65px; height: 65px" :src="curPic" /></div>
              <div>
                <div style="height: 10px"></div>
                <el-text class="mx-1" size="large" style="margin-left: 10px; ">{{curName}}</el-text> <br>
                <div style="height: 10px"></div>
                <el-text class="mx-1" size="small" style="margin-left: 10px;">{{curAuthor}}</el-text>
              </div>
            </div>
          </div>
          <div>
            <div style="display: flex; justify-content: center">
              <el-button @click="prePlay" style="border: none;" circle >
                <el-icon size="30px">
                  <ArrowLeft/>
                </el-icon>
              </el-button>
              <el-button @click="playOrPause" style="border: none;" circle>
                <el-icon size="30px">
                  <VideoPause v-if="isPlay == true"/>
                  <VideoPlay v-if="isPlay == false"/>
                </el-icon>
              </el-button>
              <el-button @click="nextPlay" style="border: none;" circle>
                <el-icon size="30px">
                  <ArrowRight/>
                </el-icon>
              </el-button>
            </div>

            <div style="display: flex; justify-content: center">
              <el-text class="mx-1" style="margin-right: 7px">{{forCurTime}}</el-text>
              <el-slider
                  style="width: 200px;"
                  :show-tooltip="false"
                  :max="allTime"
                  v-model="curTime"
                  @input="changeSlider"

              />
              <el-text class="mx-1" style="margin-left: 5px;">{{forAllTime}}</el-text>
            </div>
          </div>
        </div>
      </template>
    </el-card>
  </div>
</template>
<script setup>
import {ref, onMounted, computed} from 'vue'
import {Search} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import request from "@/utils/request.js";

const searchContent = ref('')
const value1 = ref(0)
const curTime = ref(0)
const allTime = ref(0)
const curPic = ref("")
const curName = ref("")
const curAuthor = ref("")
const curIndex = ref(-1)
const forCurTime = computed({
  get(){
    let l = Math.floor(curTime.value  / 60)
    let r = (curTime.value % 60)
    let left = l
    let right = r
    if (l < 10){
      left = "0" + left
    }
    if (right < 10){
      right = "0" + right
    }
    return left + ":" + right
  }
})
const forAllTime = computed({
  get(){
    let l = Math.floor(allTime.value  / 60)
    let r = (allTime.value % 60)
    let left = l
    let right = r
    if (l < 10){
      left = "0" + left
    }
    if (right < 10){
      right = "0" + right
    }
    return left + ":" + right

  }
})
const audioRef = ref(null)
const isPlay = ref(false)
const musicData = ref([])
const playOrPause = () => {
  if (isPlay.value == false){
    audioRef.value.play()
  }else{
    audioRef.value.pause()
  }
  isPlay.value = !isPlay.value
}

setInterval(()=>{
  curTime.value = parseInt(audioRef.value.currentTime)
}, 500)
setInterval(()=>{
  if (audioRef.value.ended === true){
    nextPlay()
  }
}, 1000)

const search = ()=>{
  let formData = new FormData()
  formData.append("input", searchContent.value)
  formData.append("filter", "name")
  formData.append("type", "netease")
  formData.append("page", "1")
  request.post("", formData)
      .then((res) => {
        console.log(res.data.data)
        musicData.value = res.data.data
        for (let i = 0; i < musicData.value.length; i++){
          musicData.value[i].index = i
        }
        ElMessage.success("搜索成功！")
      }).catch((err) => {
        ElMessage.error("搜索失败！")
        console.log(err)
  })
}
const dblclick = (row)=>{
  play(row)
}
const prePlay = ()=>{
  if (curIndex.value === 0){
    curIndex.value = musicData.value.length - 1
  }else{
    curIndex.value--
  }
  play(musicData.value[curIndex.value])
}
const nextPlay = ()=>{
  if (curIndex.value === musicData.value.length - 1){
    curIndex.value = 0
  }else{
    curIndex.value ++;
  }
  play(musicData.value[curIndex.value])
}
const play = (row)=>{
  audioRef.value.src = row.url
  curIndex.value = row.index
  console.log(curIndex.value)
  curTime.value = 0
  curPic.value = row.pic
  curName.value = row.title
  curAuthor.value = row.author
  audioRef.value.volume = 1
  setTimeout(()=>{
    allTime.value = parseInt(audioRef.value.duration)
    // console.log(allTime.value)
  }, 500)
  audioRef.value.play()
  isPlay.value = true
}
const tableRowClassName = ({row, rowIndex}) => {
  if (rowIndex === curIndex.value && musicData.value[curIndex.value].pic === curPic.value) {
    return 'success-row'
  }
  return ''
}
const changeSlider = ()=>{
  audioRef.value.currentTime = curTime.value
}

</script>
<style>
* {
  margin: 0;
  padding: 0;
}

*{
  moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select:none;
  -khtml-user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>